@home.main("Search"){


    <div class="row">
        <div class="form-group col-sm-12">
            <h2 class="page-heading">Condition Search</h2>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-3">
            <div class="bs-docs-sidebar" role="complementary">
                <ul class="nav bs-docs-sidenav">
                    <li class="active"><a href="#condition" data-toggle="tab">Gene ID</a></li>
                    @*         <li><a href="#circ" data-toggle="tab">Gene Name</a></li>*@
                    <li><a href="#region" data-toggle="tab">Region</a></li>
                </ul>
            </div>
        </div>

        <div class="col-sm-8 tab-content myform" >
            <div class="tab-pane active" id="condition">
                <form class="form-horizontal" method="get" id="geneIdForm">
                    <h4>Required:</h4>
                    <hr>

                    <div class="form-group">
                        <label class="control-label col-sm-2">Species:</label>
                        <div class="col-sm-3">
                            <select class="form-control" name="db" id="db">
                                <option value="02428">02428</option>
                                <option value="9311">9311</option>
                                <option value="Basmati1">Basmati1</option>
                                <option value="CJ14">CJ14</option>
                                <option value="CN1B">CN1B</option>
                                <option value="D62B">D62B</option>
                                <option value="DG">DG</option>
                                <option value="DHX2H">DHX2H</option>
                                <option value="FH838">FH838</option>
                                <option value="FS32">FS32</option>
                                <option value="G46">G46</option>
                                <option value="Guang8B">Guang8B</option>
                                <option value="Gui630">Gui630</option>
                                <option value="II32">II32</option>
                                <option value="IR64">IR64</option>
                                <option value="J4115S">J4115S</option>
                                <option value="KY131">KY131</option>
                                <option value="lemont">lemont</option>
                                <option value="LJ">LJ</option>
                                <option value="N22">N22</option>
                                <option value="NAMROO">NAMROO</option>
                                <option value="NIP">NIP</option>
                                <option value="R3551">R3551</option>
                                <option value="R498">R498</option>
                                <option value="R527">R527</option>
                                <option value="R548">R548</option>
                                <option value="TUMBA">TUMBA</option>
                                <option value="WSSM">WSSM</option>
                                <option value="Y58S">Y58S</option>
                                <option value="YueGuang">YueGuang</option>
                                <option value="YX">YX</option>
                                <option value="ZH11">ZH11</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-sm-2">Gene ID:</label>
                        <div class="col-sm-8">

                            <textarea name="gene" id="gene" class="form-control" rows="5"></textarea>
                            <span class="help-block">e.g.,&nbsp;<a href="#"><em id="egGene">Example</em></a></span>
                        </div>
                    </div>
                    <hr>
                    <div class="form-group">
                        <div class="actions col-sm-offset-3 col-sm-3">
                            <button type="button" class="btn btn-primary" style="width: 90%;" id="search" onclick="geneIdSearch()">
                                Search</button>
                        </div>
                    </div>
                </form>
            </div>


            <div id="region" class="tab-pane">
                <h4>Search CircRNA profiles in a region</h4>
                <hr>
                <form class="form-horizontal" method="get" action="circInfoByPositon" id="regionForm">
                    <div class="form-group">
                        <label class="control-label col-sm-3">Species:</label>
                        <div class="col-sm-3">
                            <select class="form-control" name="species" id="species">
                                <option value="02428">02428</option>
                                <option value="9311">9311</option>
                                <option value="Basmati1">Basmati1</option>
                                <option value="CJ14">CJ14</option>
                                <option value="CN1B">CN1B</option>
                                <option value="D62B">D62B</option>
                                <option value="DG">DG</option>
                                <option value="DHX2H">DHX2H</option>
                                <option value="FH838">FH838</option>
                                <option value="FS32">FS32</option>
                                <option value="G46">G46</option>
                                <option value="Guang8B">Guang8B</option>
                                <option value="Gui630">Gui630</option>
                                <option value="II32">II32</option>
                                <option value="IR64">IR64</option>
                                <option value="J4115S">J4115S</option>
                                <option value="KY131">KY131</option>
                                <option value="lemont">lemont</option>
                                <option value="LJ">LJ</option>
                                <option value="N22">N22</option>
                                <option value="NAMROO">NAMROO</option>
                                <option value="NIP">NIP</option>
                                <option value="R3551">R3551</option>
                                <option value="R498">R498</option>
                                <option value="R527">R527</option>
                                <option value="R548">R548</option>
                                <option value="TUMBA">TUMBA</option>
                                <option value="WSSM">WSSM</option>
                                <option value="Y58S">Y58S</option>
                                <option value="YueGuang">YueGuang</option>
                                <option value="YX">YX</option>
                                <option value="ZH11">ZH11</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3">Chromosome:</label>
                        <div class="col-sm-3">
                            <input class="form-control chr" name="chr" id="chr">
                        </div>
                        <label class="control-label">e.g., <a href="#"><em id="egChr">chr1</em></a></label>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3">Start:</label>
                        <div class="col-sm-3">
                            <input class="form-control" name="start" id="start">
                        </div>
                        <label class="control-label">e.g., <a href="#"><em id="egStart">15</em></a></label>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3">End:</label>
                        <div class="col-sm-3">
                            <input class="form-control" name="end" id="end">
                        </div>
                        <label class="control-label">e.g., <a href="#"><em id="egEnd">2000000</em></a></label>
                    </div>
                    <div class="form-group">
                        <div class="actions col-sm-offset-3 col-sm-3">
                            <button type="button" class="btn btn-primary" style="width: 90%;" id="search" onclick="regionSearch()">
                                Search</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="result" style="display: none">
        <hr>

        <label>Select the columns to display:</label>
        <div id="checkbox" class="checkbox">

        </div>
        <div id="toolbar">
                &nbsp;Keyword：
        </div>

        <table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
        data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]" data-search-align="left" data-multiple-search="true"
        style="table-layout: fixed;
            word-wrap: break-word"
        >
            <thead>
                <tr>
                    <th data-field='geneid' data-sortable='true' id="marker">Gene ID</th>

                </tr>
            </thead>
        </table>
    </div>

    <script src="@routes.Assets.at("tools/enrich.js")" type="text/javascript"></script>



    <script>
            $(function () {
                function extractor(query) {
                    var result = /([^,]+)$/.exec(query);
                    if (result && result[1])
                        return result[1].trim();
                    return '';
                }

                $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                    // 获取已激活的标签页的名称
                    var activeTab = $(e.target).text();
                    // 获取前一个激活的标签页的名称
                    var previousTab = $(e.relatedTarget).text();
                    $("#result").hide()
                });

                $('#egChr').click(function () {
                    var eg = $(this).text().trim();
                    $('#chr').val(eg);
                    $("#regionForm").formValidation("revalidateField", "chr")
                });
                $('#egStart').click(function () {
                    var eg = $(this).text().trim();
                    $('#start').val(eg);
                    $("#regionForm").formValidation("revalidateField", "start")
                });
                $('#egEnd').click(function () {
                    var eg = $(this).text().trim();
                    $('#end').val(eg);
                    $("#regionForm").formValidation("revalidateField", "end")
                });




                $('#egGeneName').click(function () {
                    var eg = $("#egGeneName").text().trim();
                    $('#geneName').val(eg);
                    $("#geneNameForm").formValidation("revalidateField", "geneName")
                });

                var array = ["Chr", "Strand", "Start", "End", "GO", "Pfam", "Interpro", "Kegg"];

                var values = ["chr", "strand", "start", "end", "go", "pfam", "ipr", "ko"];

                var thHtml="";

                $.each(array, function (i, v) {
                    thHtml += "<th data-field='" + values[i] + "' data-sortable='true'>" + v + "</th>"
                });
                $("#marker").after(thHtml);
                var html = "";
                $.each(array, function (n, value) {
                            html += "<label style='margin-right: 15px'>" +
                                    "<input type='checkbox' checked='checked' value='" + values[n] + "' onclick=\"setColumns('" + values[n] + "')\">" + value +
                                    "</label>"
                        }
                );
                $("#checkbox").append(html);

                $('#table').bootstrapTable({
                    columns: [
                        {
                            field: "geneid",
                            title: "Gene_ID",
                            formatter: function (value, row, index) {
                                var geneid = "<p><a href='/RiceRC/riceInfo/moreInfo?id=" + row.id +"' target='_blank'>" + row.geneid + "</a></p>";

                                return geneid;
                            }
                        }, {
                            field: "chr",
                            title: "Chr"
                        }, {
                            field: "start",
                            title: "Start"
                        }, {
                            field: "end",
                            title: "End"
                        }, {
                            field: "strand",
                            title: "Strand"
                        }, {
                            field: "go",
                            title: "GO",
                            formatter: function (value, row, index) {
                                var go = "";
                                if (row.go != "-") {
                                    var array = row.go.split(";");
                                    $.each(array, function (i, v) {
                                        go += "<p><a href='http://amigo.geneontology.org/amigo/term/" + v +"'>" + v + "</a></p>"
                                    });
                                }else{
                                    go = "-"
                                }

                                return go;
                            }
                        }, {
                            field: "pfam",
                            title: "Pfam",
                            formatter: function (value, row, index) {
                                var pfam = "";
                                if (row.pfam != "-") {
                                    var array = row.pfam.split(";");
                                    $.each(array, function (i, v) {
                                        pfam += "<p><a href='http://pfam.xfam.org/family/" + v +"'>" + v + "</a></p>"
                                    });
                                }else{
                                    pfam = "-"
                                }

                                return pfam;
                            }
                        }, {
                            field: "ipr",
                            title: "Interpro",
                            formatter: function (value, row, index) {
                                var ipr = "";
                                if (row.ipr != "-") {
                                    var array = row.ipr.split("|");
                                    $.each(array, function (i, v) {
                                        var iprId = v.substring(v.length - 10, v.length - 1);
                                        var iprFuc = v.substring(0, v.length - 11);
                                        ipr += "<p><a href='http://www.ebi.ac.uk/interpro/entry/" + iprId +"'>" + iprId + "</a> : <span>" + iprFuc + "</span></p>"
                                    });
                                }else{
                                    ipr = "-"
                                }

                                return ipr;
                            }

                        }, {
                            field: "ko",
                            title: "KEGG",
                            formatter: function (value, row, index) {
                                var ko = "";
                                if (row.ko != "-") {
                                    var array = row.ko.split(";");
                                    $.each(array, function (i, v) {
                                        ko += "<p><a href='https://www.kegg.jp/dbget-bin/www_bget?ko:" + v +"' target='_blank'>ko" + v  + "</a></p>"
                                    });
                                }else{
                                    ko = "-"
                                }

                                return ko;
                            }
                        },{
                            field: "pathway",
                            title: "Pathway",
                            formatter: function (value, row, index) {
                                var pathway = "";
                                if (row.pathway != "-") {
                                    var array = row.pathway.split(";");
                                    $.each(array, function (i, v) {
                                        pathway += "<p>" + v  + "</p>"
                                    });
                                }else{
                                    pathway = "-"
                                }

                                return pathway;
                            }
                        }
                    ]
                });

                var hiddenArray = ["ipr","pathway"];
                $.each(hiddenArray, function (n, value) {
                            $('#table').bootstrapTable('hideColumn', value);
                            $("input:checkbox[value=" + value + "]").attr("checked", false)
                        }
                );

                formValidation()

            });


            function formValidation() {
                $('#geneIdForm').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        geneId: {
                            validators: {
                                notEmpty: {
                                    message: 'Gene Id is required！'
                                }
                            }
                        }
                    }
                });
                $('#regionForm').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        chr: {
                            validators: {
                                notEmpty: {
                                    message: 'Chromosome is required！'
                                }
                            }
                        },
                        start: {
                            validators: {
                                notEmpty: {
                                    message: 'Start is required！'
                                },
                                integer: {
                                    message: 'Start must be integer！'
                                }

                            }
                        },
                        end: {
                            validators: {
                                notEmpty: {
                                    message: 'End is required！'
                                },
                                integer: {
                                    message: 'End must be integer！'
                                }

                            }
                        }
                    }
                });

            }

            function regionSearch() {
                var form = $("#regionForm")
                var fv = form.data("formValidation");
                fv.validate();
                if (fv.isValid()) {
                    var index = layer.load(1, {
                        shade: [0.1, '#fff']
                    });
                    $("#search").attr("disabled", true).html("Search...");
                    $.ajax({
                        url: "@routes.ToolsController.searchByRegion()",
                        type: "post",
                        data: $("#regionForm").serialize(),
                        success: function (data) {
                            $('#table').bootstrapTable("load", data);
                            $("#search").attr("disabled", false).html("Search").blur();
                            layer.close(index);
                            $("#result").show()
                        }
                    });
                }
            }

            function geneIdSearch() {
                var form = $("#geneIdForm")
                var fv = form.data("formValidation");
                fv.validate();
                if (fv.isValid()) {
                    var index = layer.load(1, {
                        shade: [0.1, '#fff']
                    });
                    $("#search").attr("disabled", true).html("Search...");
                    $.ajax({
                        url: "@routes.ToolsController.searchById()",
                        type: "post",
                        data: $("#geneIdForm").serialize(),
                        success: function (data) {
                            $('#table').bootstrapTable("load", data);
                            $("#search").attr("disabled", false).html("Search").blur();
                            layer.close(index);
                            $("#result").show()
                        }
                    });
                }
            }

            function setColumns(value) {
                var element = $("input:checkbox[value=" + value + "]");
                if (element.is(":checked")) {
                    $('#table').bootstrapTable('showColumn', value);
                } else {
                    $('#table').bootstrapTable('hideColumn', value);
                }
            }
    </script>





}